<template>
	<view>
		<view class="data-item" v-for="item in newSubscribleList" @click="goSubscribleDetail(item)">
			<template v-if="item.STARTPORTNAME&&item.DESTPORTNAME">
				<view class="group">
					<view class="blno">B/L：{{item.CGO_MBL_NO}}</view>
					<view class="tab" :class="item.className">
						{{item.className=='latest'?'最新' :item.className=='in_1_hour' ? '一小时内' :  item.className=='in_3_hour'   ? '三小时内' :  item.className=='in_today' ? '今日更新' :'一天前' }}
					</view>
				</view>
				<view class="group">
					<view class="data-text">最新状态：</view>
					<view class="data-text">更新时间</view>
				</view>
				<view class="group">
					<view class="status">{{item.StatusText ? item.StatusText : '--'}}</view>
					<view class="time">{{item.formatTime}}</view>
				</view>
				<view class="group">
					<view class="port">
						<view>{{item.STARTPORTNAME}}</view>
						<view>
							<uv-icon name="/static/cargoTrack/jt.svg" />
						</view>
						<view>{{item.DESTPORTNAME}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="group">
					<view class="blno">B/L：{{item.CGO_MBL_NO}}</view>
					<view class="tab  before_today">获取中</view>
				</view>
				<view class="empty">
					<view class="empty-icon">
					<uv-icon name="/static/cargoTrack/empty.svg" size="30"></uv-icon>	
					</view>
					<view>数据接收中…</view>
				</view>
			</template>
		</view>
		<uv-empty text="暂无订阅记录" mode="data" v-if="newSubscribleList.length==0" icon="/static/empty.png"></uv-empty>
	</view>
</template>

<script>
	import customRouter from '@/utils/customRouter.js'
	export default {
		props: {
			subscribleList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			newSubscribleList() {
				if (this.$props.subscribleList.length < 1) return []
				const newData = JSON.parse(JSON.stringify(this.$props.subscribleList))
				newData.forEach((t) => {
					if (!t.LogCartonNo) return
					const statuesList = [{
							time: t.LogCartonNo.reEventTime,
							text: '还空'
						},
						{
							time: t.LogCartonNo.trainsDischargingTime,
							text: '铁路运输'
						},
						{
							time: t.LogCartonNo.ata,
							text: '船舶靠港'
						},
						{
							time: t.LogCartonNo.advEventTime,
							text: '船舶离港'
						},
						{
							time: t.LogCartonNo["load-oprateTime"],
							text: '装船'
						},
						{
							time: t.LogCartonNo["npp-oprateTime"],
							text: '码头放行'
						},
						{
							time: t.LogCartonNo["ingate-oprateTime"],
							text: '重箱进港'
						},
						{
							time: t.LogCartonNo.custpassTime,
							text: '海关放行'
						},
						{
							time: t.LogCartonNo.bookingTime,
							text: '进港预约'
						},
						{
							time: t.LogCartonNo.outTime,
							text: '提空出门'
						},
						{
							time: t.LogCartonNo.containValidity,
							text: '提箱预约'
						},
						{
							time: t.LogCartonNo.sendtime,
							text: '船司放箱'
						},
					]
					const filterList=statuesList.filter(t=>t.time)
					for(let i=0;i<filterList.length-1;i++){
						if(filterList[i].time&&filterList[i+1].time){
							if(new Date(filterList[i].time).getTime()>new Date(filterList[i+1].time).getTime()){
								const temp=filterList[i];
								filterList[i]=filterList[i+1]
								filterList[i+1]=temp
							}
						}
					}
					console.log(filterList);
					t.StatusText=filterList[filterList.length-1].text
				})
				return newData
			}
		},
		data() {
			return {}
		},
		methods: {
			goSubscribleDetail(item) {
				if (!(item.STARTPORTNAME && item.DESTPORTNAME)) return
				customRouter.navigateTo({
					url: `/cargoTrackPackages/subscribleDetail/subscribleDetail?billNo=${item.CGO_MBL_NO}&startPort=${item.STARTPORTNAME}&endPort=${item.DESTPORTNAME}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-item {
		padding: 10px 12px;
		background: #FFFFFF;
		border: 1px solid #E4E7ED;
		box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
		border-radius: 8px;
		margin-bottom: 12px;
	}

	.data-item:active {
		background-color: #f2f3f5;
	}

	.group {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.blno {
		font-size: 12px;
		color: #333333;
		font-weight: 500;
	}

	.tab {
		background: #67C23A;
		color: #fff;
		padding: 0 3px;
		font-size: 12px;
	}

	.tab-warning {
		background: #F7B601;
	}

	.data-text {
		font-size: 12px;
		color: #777777;
		margin-top: 4px;
	}

	.status {
		font-size: 16px;
		color: #3A75F5;
	}

	.time {
		font-size: 12px;
		color: #969799;
	}

	.port {
		font-size: 17px;
		color: #212730;
		font-weight: 500;
		display: flex;
		align-items: center;
	}

	.port view:nth-child(2) {
		margin: 0 3px;
	}

	.latest {
		background-color: #f56c6c;
	}

	.in_1_hour {
		background-color: #ff944c;
	}

	.in_3_hour {
		background-color: #ffcd42;
	}

	.in_today {
		background-color: #409eff;
	}

	.before_today {
		background-color: #c8c9cc;
	}

	.empty {
		text-align: center;
		color: #C8C9CC;
		font-size: 12px;
		margin-top: 10px;
	}
	.empty-icon{
		width: 30px;
		margin:0 auto;
	}
</style>